<template>
  <div class="container">
    <div class="mainContainer">
      <div class='Popup-one' v-if='pop_one'>
        <div class='Popup-one-top'>
          {{list}}
        </div>
        <div class='Popup-one-bottom '>
          <img src="static/image/X-btn.png" alt="" @click='cxsure(false)' v-show='closeFlag'>
          <img src="static/image/Accept-btn.png" alt="" @click='cxsure(true)' v-show="promptBox">
        </div>
      </div>
      <div class="top"></div>
      <div class="bottom">
        <h2>账户充值</h2>
        <div class="fir">
          <span>账户充值：</span>
          <div class="right">
            <div class="btns">
              <!-- <a href="javascript:;" v-for='(item,index) in numberlist' :key='index' @click='number=parseInt(item)'>{{item}}</a> -->
              <!-- <p>一类人参王: <input type="text" v-model="gold" min="0" class="reset">
                  <img src="../../../static/image/z_arrowup.png" @click='gold++'/>
	        				  <img src="../../../static/image/z_arrowd.png" class="down" @click='gold>0?gold--:""'/>
                  </p>

                  <p>二类人参王: <input type="text" v-model="ying" min="0" class="reset">
                  <img src="../../../static/image/z_arrowup.png" @click='ying++'/>
	        				  <img src="../../../static/image/z_arrowd.png" class="down" @click='ying>0?ying--:""'/>
                  </p>

                  <p>三类人参王: <input type="text" v-model="tong" min="0" class="reset">
                  <img src="../../../static/image/z_arrowup.png" @click='tong++'/>
	        				  <img src="../../../static/image/z_arrowd.png" class="down" @click='tong>0?tong--:""'/>
                  </p>

                 <p>一类极品参: <input type="text" v-model="gold" min="0" class="reset">
                  <img src="../../../static/image/z_arrowup.png" @click='gold++'/>
	        				  <img src="../../../static/image/z_arrowd.png" class="down" @click='gold>0?gold--:""'/>
                  </p>

                  <p>二类极品参: <input type="text" v-model="ying" min="0" class="reset">
                  <img src="../../../static/image/z_arrowup.png" @click='ying++'/>
	        				  <img src="../../../static/image/z_arrowd.png" class="down" @click='ying>0?ying--:""'/>
                  </p>-->

              <p>{{gametype}}: <input type="text" v-model="bpx" class="reset">
                <img src="../../../static/image/z_arrowup.png" @click='bpx++' />
                <img src="../../../static/image/z_arrowd.png" class="down" @click='bpx>0?bpx--:""' />
              </p>

            </div>
            <div class="count">
              <!-- <p>数量:</p>
                  <input type="text" v-model="number" min="0" class="reset"> -->
              <!-- <img src="../../../static/image/z_arrowup.png" @click='number++'/>
	        				  <img src="../../../static/image/z_arrowd.png" class="down" @click='number>0?number--:""'/> -->
              <!-- <a href="javascript:;">

	        				</a> -->
            </div>
          </div>
        </div>
        <div>
          <!-- <span class='g1-title' data-title="提币地址:">提币地址:</span>
          <span class='g2'>
            <input type="text" v-model="value">
          </span> -->
        </div>
        <div class="sec">
          <span>充值金额：</span>
          <div class="pay">
            <p>{{bpx*ore && bpx*ore>=0?bpx*ore:0}}{{type}}</p>
            <div class="agree">
              <img src="../../../static/image/z_ok.png" />
              <p>我已阅读活动规则，充值金额不可提现、退款</p>
            </div>
            <a href="javascript:;" @click='shop'>立即充值</a>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  name: "recharge",
  data() {
    return {
      number: 0,
      // numberlist: ["500种子", "1000种子", "2000种子", "4000种子", "10000种子"],
      list: [],
      pop_one: false,
      closeFlag: false,
      promptBox: true,
      mount: u.getStore("mount") || 0,
      cxflag: false,
      jlflag: true,
      freemount: u.getStore("freezing_amount"),
      value: "",
      bpx: 0,
      gametype: u.getStore("winning").bitype,
      ore: u.getStore("winning").ore,
      type: u.getStore("winning").type
    };
  },

  methods: {
    cxsure(flag) {
      this.pop_one = false;
      this.closeFlag = false;
      var that = this;
      var address = this.value;
      if (flag && this.cxflag) {
        var amount=0;
        if(that.bpx*that.ore && that.bpx*that.ore>=0){
          amount=that.bpx*that.ore
        }else{
          amount=0
        }
        u.exchangeConsume({
          phone: u.getStore("user").userid,
          num: amount,
          tokenType: u.getStore("winning").type
        },data=>{
          if(data.code==200){
            u.sellbpx(
              {
                phone: u.getStore("user").userid,
                recharge_num: amount
              },
              data => {
                that.closeFlag = true;
                var date = data;
                if(data[0].code==200){
                  u.updateRecord({
                    id: date[0].id,
                    isPass: 1,
                  },data=>{
                    if(data[0].code==200){
                      that.list = "充值成功";
                      that.pop_one = true;
                      that.promptBox = false;
                      setTimeout(() => {
                        that.pop_one = false;
                        that.promptBox = true;
                        that.$router.push({ path: "/index_ginseng_balance" });
                        window.location.reload();
                      }, 3000);
                    }else{
                      that.list = "充值失败";
                      that.pop_one = true;
                      that.promptBox = false;
                      setTimeout(() => {
                        that.pop_one = false;
                        that.promptBox = true;
                      }, 3000);
                    }
                  })
                }else{
                  that.list = "充值失败";
                  that.pop_one = true;
                  that.promptBox = false;
                  setTimeout(() => {
                    that.pop_one = false;
                    that.promptBox = true;
                  }, 3000);
                }

              }
            );
          }else{
            that.list = "充值失败";
            that.pop_one = true;
            that.promptBox = false;
            setTimeout(() => {
              that.pop_one = false;
              that.promptBox = true;
            }, 3000);
          }
        })
        /*u.sellbpx(
          {
            phone: u.getStore("user").userid,
            recharge_num: that.bpx * that.ore
          },
          data => {
            that.closeFlag = true;
            var date = data;
            u.sell(
              {
                bat_id: u.getStore("winning").bau_id,
                amount: that.bpx * that.ore,
                phone: u.getStore("user").name,
                address: "xxx",
                bag_id: data[0].id,
                ztype: 3,
                type: 1
              },
              data => {
                if (data.code == "200") {
                  that.closeFlag = false;
                  that.list = "种子充值中，等待审核～";
                  setTimeout(() => {
                    that.$router.push({ path: "/index_ginseng_balance" });
                    window.location.reload();
                  }, 1200);
                } else {
                  that.list = "充值失败，请检查余额";
                  that.closeFlag = true;
                }
                that.cxflag = false;
                that.pop_one = true;

                that.jlflag = true;
                that.number = 0;
              }
            );
          }
        );*/
      }
    },
    shop() {
      if (this.bpx == 0) {
        // alert("请输入充值数量");
        this.$parent.loading({
          message: "请输入充值数量",
          type: false
        });
        $(".reset").val("");
        return;
      } else if (this.bpx < 0) {
        // alert("充值数量需要大于1");
        this.$parent.loading({
          message: "充值数量需要大于1",
          type: false
        });
        $(".reset").val("");
        return;
      }
      // if (this.value == "") {
      //   alert("请输入提币地址");
      //   return;
      // }
      if (this.jlflag) {
        this.list = "是否确认充值";
        this.pop_one = true;
        this.closeFlag = true;
        this.cxflag = true;
        this.jlflag = false;
        setTimeout(() => {
          this.jlflag = true;
        }, 2000);
      }
    }
  },
  mounted() {
    this.$parent.flag1 = false;
    this.$parent.flag2 = true;
  }
};
</script>

<style scoped lang='less'>
@import url("../../css/base.css");
.g1-title {
  display: inline-block;
  width: 120px;
  position: relative;
  font-size: 18px;
  color: white;
  z-index: 0;
  vertical-align: top;
  text-shadow: -2px 1px 1px #3a230a, 2px -1px 1px #3a230a;
  // &:before {
  //   content: attr(data-title);
  //   position: absolute;
  //   -webkit-text-stroke: 3px #3a230a;
  //   z-index: -1;
  // }
}

.g2 {
  display: inline-block;
  width: 63%;
  height: 50px;
  background: url("../../../static/image/http.png") no-repeat center;
  background-size: 100% 100%;
  text-align: center;
  position: relative;
  top: -6px;
  left: -36px;
  input {
    width: 95%;
    background-color: transparent;
    border: 0;
    height: 100%;
    font-size: 18px;
    font-weight: 700;
    color: white;

    &:focus {
      outline: none;
    }

    &:before {
      content: attr(data-title);
      position: absolute;
      -webkit-text-stroke: 3px #3a230a;
      z-index: -1;
    }
  }
}
.Popup-one {
  background: url("../../../static/image/Panel.png") no-repeat;
  height: 210px;
  width: 460px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
  z-index: 10;
}
.Popup-one > .Popup-one-bottom > img:nth-of-type(1) {
  margin-right: 40px;
}
.Popup-one > .Popup-one-bottom > img:nth-of-type(1) {
  margin-left: 40px;
}
.Popup-one > .Popup-one-top {
  height: 150px;
  font-size: 28px;
  color: #fff;
  line-height: 150px;
  position: relative;
  font-size: 24px;
  color: white;
  z-index: 0;
  text-shadow: 0 2px #505050, 2px 0 #505050, -2px 0 #505050, 0 -1px #505050;
}
.Popup-one > .Popup-one-top::before {
  position: absolute;
  z-index: -1;
  content: attr(data-attr);
  -webkit-text-stroke: 5px #533c1f;
}
.container {
  padding: 20px 0;
  width: 100%;
  min-width: 1200px;
  min-height: 968px;
  background-image: url("../../../static/image/ginsengbg2.png");
  background-size: 100% 100%;
}
.mainContainer {
  margin: 0 auto;
  max-width: 1290px;
  display: flex;
  flex-direction: column;
}
.top {
  width: 100%;
  height: 280px;
  background: url(../../../static/image/z_6.png) no-repeat scroll top left;
  background-size: 100% 100%;
  margin-bottom: 2%;
}
.bottom {
  width: 100%;
  height: 646px;
  background: url(../../../static/image/soldbg.png) no-repeat scroll top left;
  background-size: 100% 100%;
  padding: 2% 5% 0 3%;
}
.bottom h2 {
  width: 30%;
  height: 71px;
  background: url(../../../static/image/z_3.png) no-repeat scroll top left;
  background-size: 100% 100%;
  text-align: center;
  font-size: 20px;
  line-height: 38px;
  font-family: "MicrosoftYaHei-Bold";
  color: #ffffff;
  text-shadow: -2px 1px 1px #1c6b65, 2px -1px 1px #1c6b65;
  font-weight: bold;
  margin-left: 35%;
  margin-bottom: 3%;
}
.fir {
  display: flex;
  flex-direction: row;
}
.right {
  width: 80%;
  margin-bottom: 2%;
}
span {
  font-size: 18px;
  line-height: 34px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  text-shadow: -2px 1px 1px #3a230a, 2px -1px 1px #3a230a;
  margin-right: 2%;
}
.btns {
  width: 100%;
  margin-bottom: 2%;
}
.btns a {
  display: inline-block;
  width: 16%;
  height: 42px;
  color: #ffffff;
  text-decoration: none;
  background: url(../../../static/image/z_7.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
  font-family: "MicrosoftYaHei-Bold";
  text-shadow: -2px 3px 3px rgba(134, 7, 0, 0.75),
    2px -2px 1px rgba(134, 7, 0, 0.75);
  margin-right: 2%;
}
.btns p {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  position: relative;
}
.count {
}
p {
  font-size: 18px;
  line-height: 34px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  text-shadow: -2px 1px 1px rgba(137, 64, 0, 0.75),
    2px -1px 1px rgba(137, 64, 0, 0.75);
  margin-right: 2%;
}
.btns input {
  display: inline-block;
  width: 16%;
  height: 34px;
  color: #ffffff;
  text-decoration: none;
  background: url(../../../static/image/z_8.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 16px;
  line-height: 30px;
  text-align: left;
  font-family: "MicrosoftYaHei";
  text-shadow: -2px 3px 3px rgba(134, 7, 0, 0.75),
    2px -2px 1px rgba(134, 7, 0, 0.75);
  padding: 0 3%;
  position: relative;
  margin-left: 20px;
}
.btns img {
  position: absolute;
  left: 18%;
  top: 15%;
}
.btns .down {
  top: 48%;
}
.sec {
  display: flex;
  flex-direction: row;
}
.sec .pay {
  display: flex;
  flex-direction: column;
}
.pay p {
  font-size: 22px;
  white-space: nowrap;
  margin-bottom: 3%;
}
.pay a {
  display: inline-block;
  width: 140px;
  height: 36px;
  color: #ffffff;
  text-decoration: none;
  background: url(../../../static/image/z_1.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  font-family: "MicrosoftYaHei";
  text-shadow: -2px 3px 3px rgba(134, 7, 0, 0.75),
    2px -2px 1px rgba(134, 7, 0, 0.75);
  margin-bottom: 3%;
}
.agree {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.agree img {
  width: 27px;
  height: 23px;
  margin-right: 1%;
}
.agree p {
  font-size: 16px;
  line-height: 36px;
  margin-top: 1%;
}
</style>
